<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>序列帧动画</title>
	</head>
	<body>
		<!--Just do it！-->
		<style type="text/css">
			/*steps(6,start/end);   控制动画在时间片断内产生跳跃,  适用于动画间隔固定的时间轴
			第一个参数表示将时间等分为若干份,第二个参数表示动画产生跳跃是在时间片断的起始帧(start)或者end(结尾帧)
			
			step-start(控制动画在时间片段的起始帧位置发生跳跃)
			step-end(控制动画在时间片段的结尾帧位置发生跳跃)*/
			
			@keyframes name{
				/*0%{}
				16.66%{background-position: -180px 0;}
				33.33%{background-position: -360px 0;}
				50.00%{background-position: -540px 0;}
				66.66%{background-position: -720px 0;}
				83.33%{background-position: -900px 0;}*/
				100.0%{background-position: 1080px 0;}
			}
			
			.jump{
				margin: 0 auto;
				width: 180px;
				height: 300px;
				border: 1px solid deepskyblue;
				background-image: url(img/girl.png);
				animation: name 1s infinite steps(6,end);
			}
		</style>
		<div class="jump">
			
		</div>
	</body>
</html>
